<template>
  <div class="comment-box">
    <div class="common-content" v-for="(item,index) of commentList" :key="item.context+index">
      <span>{{item.nickName}}:</span>
      <span>{{item.context}}</span>
    </div>
    <div class="addcommon-content">
      <input type="text" placeholder="评论" v-model="message" />
      <span class="fabiao-box" @click="toComment">发表</span>
    </div>
  </div>
</template>

<script>
import { getDynamicCooment, addDynamicCooment } from "network/dynamic";
import { mapState } from "vuex";

export default {
  name: "comment",
  props: {
    dynaId: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      commentList: [],
      message: "",
    };
  },
  created() {
    this.toGetDynamicCooment();
  },
  methods: {
    toComment() {
      let context = this.message;
      let dynaId = this.dynaId;
      let userId = this.userId;
      if(!context){
        this.$toast({
          message:"发表内容不能为空",
          position:"bottom"
        })
        return 
      }
      if(this.userId == null){
        this.$toast({
          message:"请登录后评论",
          position:"bottom"
        })
        this.$router.push('/login')
        return
      }
      addDynamicCooment({ context, dynaId, userId }).then((res) => {
        if (res.code == 200) {
          this.message = "";
          this.toGetDynamicCooment();
        }
      });
    },
    toGetDynamicCooment() {
      let id = this.dynaId;
      getDynamicCooment(id).then((res) => {
        this.commentList = res.data;
      });
    },
  },
  computed: {
    ...mapState({
      userId: (state) => state.moduleUser.userId,
    }),
  },
};
</script>

<style scoped>
.comment-box {
  margin-bottom: 5px;
}
.common-content {
  padding-left: 65px;
  padding-right: 20px;
}
.common-content span {
  font-size: 12px;
}
.common-content span:nth-child(1) {
  margin-right: 4px;
  color: orangered;
}
.common-content span:nth-child(2) {
  color: #666;
  margin-bottom: 2px;
}
.addcommon-content {
  padding-left: 65px;
  padding-right: 20px;
  margin-top: 10px;
}
.addcommon-content input {
  width: 80%;
  border: none;
  outline: none;
  font-size: 12px;
  background-color: rgb(247, 247, 247);
  height: 30px;
  border-radius: 2px;
  text-indent: 5px;
}
.fabiao-box {
  display: inline-block;
  font-size: 12px;
  margin-left: 2px;
  height: 30px;
  background-color: rgb(240, 240, 240);
  padding: 0 3px;
  border-radius: 2px;
  line-height: 30px;
}
</style>